<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="div">
        <!-- 一般不做长表达式运算 -->
        <!-- {{msg.split('').reverse().join('')}} -->
        
        <!-- <div>
            {{reverseMsg}}
            <div>
                <input type="text" v-model="msg">
            </div>
        </div> -->

        <select v-model="gender">
            <option value="male">男</option>
            <option value="female">女</option>
            <option value="">全部</option>
        </select>
        <ul>
            <li v-for="item in selectSex">{{item.name}}</li>
        </ul>
        
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const app = Vue.createApp({
            data: function () {
                return {
                    msg: 'hello',
                    gender:'',
                    arr:[
                        {name:'陈鹏',sex:'male'},
                        {name:'黄雄',sex:'male'},
                        {name:'庄云',sex:'female'},
                        {name:'淑芳',sex:'female'},
                    ]
                }
            },
           
            methods: {
                
            },
            // 计算属性:一定要有返回值
            //发生在哪个生命周期:创建阶段
            computed: {
                reverseMsg() {
                    return this.msg.split('').reverse().join('')
                    // return 2
                },
                selectSex(){
                    if(this.gender=='') return this.arr
                    // 过滤filter:返回值是:表达式等于true的数据的数组
                    return this.arr.filter((person)=> person.sex === this.gender);
                }
            },
            created() {
                console.log('创建',this.reverseMsg);
            },

        }).mount('#div');
    </script>

</body>

</html>